<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>机器人管理后台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 引入地图库 -->
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'dark-3': '#86909C',
            'light-1': '#F2F3F5',
            'light-2': '#F7F8FA',
            'light-3': '#FFFFFF',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
            'card-hover': '0 6px 16px 0 rgba(0, 0, 0, 0.08)',
          }
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 rounded-lg text-dark-2 hover:bg-primary/5 hover:text-primary transition-all duration-200;
      }
      .sidebar-item.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .card {
        @apply bg-white rounded-xl shadow-card p-5 transition-all duration-300 hover:shadow-card-hover;
      }
      .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2;
      }
      .btn-primary {
        @apply bg-primary text-white hover:bg-primary/90 active:bg-primary/80;
      }
      .btn-secondary {
        @apply bg-white border border-dark-3 text-dark-2 hover:bg-light-1 active:bg-light-2;
      }
      .btn-success {
        @apply bg-success text-white hover:bg-success/90 active:bg-success/80;
      }
      .btn-warning {
        @apply bg-warning text-white hover:bg-warning/90 active:bg-warning/80;
      }
      .btn-danger {
        @apply bg-danger text-white hover:bg-danger/90 active:bg-danger/80;
      }
      .form-input {
        @apply w-full px-3 py-2 border border-dark-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
      }
      .table-row-hover {
        @apply hover:bg-light-1 transition-colors;
      }
    }
  </style>
</head>
<body class="font-inter bg-light-2 text-dark">
  <div class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white border-r border-light-1 flex-shrink-0 hidden md:block transition-all duration-300 ease-in-out z-20" id="sidebar">
      <div class="flex items-center justify-between p-4 border-b border-light-1">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
            <i class="fa fa-cogs text-white"></i>
          </div>
          <h1 class="text-xl font-bold text-dark">机器人管理系统</h1>
        </div>
        <button class="md:hidden text-dark-2 hover:text-dark" id="closeSidebar">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <nav class="py-4">
        <div class="px-4 py-2 text-xs font-medium text-dark-3 uppercase">主菜单</div>
        <a href="#dashboard" class="sidebar-item active">
          <i class="fa fa-dashboard w-5 text-center"></i>
          <span>仪表盘</span>
        </a>
        <a href="#robots" class="sidebar-item">
          <i class="fa fa-android w-5 text-center"></i>
          <span>机器人管理</span>
        </a>
        <a href="#tasks" class="sidebar-item">
          <i class="fa fa-tasks w-5 text-center"></i>
          <span>任务调度</span>
        </a>
        <a href="#monitor" class="sidebar-item">
          <i class="fa fa-line-chart w-5 text-center"></i>
          <span>性能监控</span>
        </a>
        <a href="#analytics" class="sidebar-item">
          <i class="fa fa-bar-chart w-5 text-center"></i>
          <span>数据分析</span>
        </a>
        
        <div class="px-4 py-2 mt-6 text-xs font-medium text-dark-3 uppercase">系统管理</div>
        <a href="#users" class="sidebar-item">
          <i class="fa fa-users w-5 text-center"></i>
          <span>用户管理</span>
        </a>
        <a href="#settings" class="sidebar-item">
          <i class="fa fa-cog w-5 text-center"></i>
          <span>系统设置</span>
        </a>
        <a href="#logs" class="sidebar-item">
          <i class="fa fa-history w-5 text-center"></i>
          <span>操作日志</span>
        </a>
      </nav>
      
      <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-light-1">
        <div class="flex items-center gap-3">
          <img src="https://picsum.photos/40/40?random=1" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p class="font-medium">管理员</p>
            <p class="text-xs text-dark-3">admin@example.com</p>
          </div>
          <button class="ml-auto text-dark-3 hover:text-danger">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>
    
    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <header class="h-16 bg-white border-b border-light-1 flex items-center justify-between px-4 z-10">
        <div class="flex items-center">
          <button class="mr-4 text-dark-2 hover:text-dark md:hidden" id="openSidebar">
            <i class="fa fa-bars"></i>
          </button>
          <div class="relative">
            <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg border border-light-1 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-3"></i>
          </div>
        </div>
        
        <div class="flex items-center gap-4">
          <button class="relative text-dark-2 hover:text-dark">
            <i class="fa fa-bell text-xl"></i>
            <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          <button class="text-dark-2 hover:text-dark">
            <i class="fa fa-question-circle text-xl"></i>
          </button>
          <div class="h-8 border-r border-light-1 mx-2"></div>
          <div class="flex items-center gap-2">
            <img src="https://picsum.photos/40/40?random=1" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
            <span class="hidden md:inline-block">管理员</span>
          </div>
        </div>
      </header>
      
      <!-- 页面内容区 -->
      <main class="flex-1 overflow-y-auto p-4 md:p-6">
        <!-- 仪表盘页面 -->
        <section id="dashboard" class="space-y-6">
          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
            <div>
              <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">仪表盘</h2>
              <p class="text-dark-3">实时监控机器人运行状态和性能指标</p>
            </div>
            <div class="flex gap-3">
              <div class="relative">
                <select class="form-input pr-10 appearance-none">
                  <option>全部机器人</option>
                  <option>在线机器人</option>
                  <option>离线机器人</option>
                  <option>异常机器人</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-3 pointer-events-none"></i>
              </div>
              <button class="btn btn-primary">
                <i class="fa fa-refresh"></i>
                <span>刷新数据</span>
              </button>
            </div>
          </div>
          
          <!-- 数据概览卡片 -->
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            <div class="card">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-dark-2 font-medium">在线机器人</h3>
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <i class="fa fa-android"></i>
                </div>
              </div>
              <div class="flex items-end justify-between">
                <div>
                  <p class="text-3xl font-bold text-dark">24</p>
                  <p class="text-success text-sm flex items-center mt-1">
                    <i class="fa fa-arrow-up mr-1"></i> 12% <span class="text-dark-3 ml-1">较上周</span>
                  </p>
                </div>
                <div class="h-16 w-24">
                  <canvas id="onlineRobotsChart"></canvas>
                </div>
              </div>
            </div>
            
            <div class="card">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-dark-2 font-medium">执行中任务</h3>
                <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                  <i class="fa fa-tasks"></i>
                </div>
              </div>
              <div class="flex items-end justify-between">
                <div>
                  <p class="text-3xl font-bold text-dark">168</p>
                  <p class="text-danger text-sm flex items-center mt-1">
                    <i class="fa fa-arrow-down mr-1"></i> 8% <span class="text-dark-3 ml-1">较上周</span>
                  </p>
                </div>
                <div class="h-16 w-24">
                  <canvas id="runningTasksChart"></canvas>
                </div>
              </div>
            </div>
            
            <div class="card">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-dark-2 font-medium">完成任务数</h3>
                <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success">
                  <i class="fa fa-check-circle"></i>
                </div>
              </div>
              <div class="flex items-end justify-between">
                <div>
                  <p class="text-3xl font-bold text-dark">2,876</p>
                  <p class="text-success text-sm flex items-center mt-1">
                    <i class="fa fa-arrow-up mr-1"></i> 24% <span class="text-dark-3 ml-1">较上周</span>
                  </p>
                </div>
                <div class="h-16 w-24">
                  <canvas id="completedTasksChart"></canvas>
                </div>
              </div>
            </div>
            
            <div class="card">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-dark-2 font-medium">异常警报</h3>
                <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning">
                  <i class="fa fa-exclamation-triangle"></i>
                </div>
              </div>
              <div class="flex items-end justify-between">
                <div>
                  <p class="text-3xl font-bold text-dark">7</p>
                  <p class="text-success text-sm flex items-center mt-1">
                    <i class="fa fa-arrow-down mr-1"></i> 32% <span class="text-dark-3 ml-1">较上周</span>
                  </p>
                </div>
                <div class="h-16 w-24">
                  <canvas id="alarmsChart"></canvas>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 主要内容区域 -->
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧区域 - 地图 -->
            <div class="lg:col-span-2 space-y-6">
              <div class="card h-[400px]">
                <div class="flex items-center justify-between mb-5">
                  <h3 class="font-bold text-dark">机器人分布地图</h3>
                  <div class="flex gap-2">
                    <button class="btn btn-secondary text-sm">
                      <i class="fa fa-map-marker"></i>
                      <span>查看全部</span>
                    </button>
                    <button class="btn btn-secondary text-sm">
                      <i class="fa fa-expand"></i>
                    </button>
                  </div>
                </div>
                <div class="h-[calc(100%-40px)] rounded-lg overflow-hidden" id="robotMap"></div>
              </div>
              
              <!-- 机器人状态图表 -->
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="card">
                  <div class="flex items-center justify-between mb-5">
                    <h3 class="font-bold text-dark">机器人类型分布</h3>
                    <div class="text-dark-3 text-sm">
                      <select class="bg-transparent border-none focus:outline-none">
                        <option>本周</option>
                        <option>本月</option>
                        <option>全年</option>
                      </select>
                    </div>
                  </div>
                  <div class="h-[250px]">
                    <canvas id="robotTypeChart"></canvas>
                  </div>
                </div>
                
                <div class="card">
                  <div class="flex items-center justify-between mb-5">
                    <h3 class="font-bold text-dark">任务完成情况</h3>
                    <div class="text-dark-3 text-sm">
                      <select class="bg-transparent border-none focus:outline-none">
                        <option>今日</option>
                        <option>本周</option>
                        <option>本月</option>
                      </select>
                    </div>
                  </div>
                  <div class="h-[250px]">
                    <canvas id="taskCompletionChart"></canvas>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧区域 - 列表和状态 -->
            <div class="space-y-6">
              <!-- 在线机器人列表 -->
              <div class="card">
                <div class="flex items-center justify-between mb-5">
                  <h3 class="font-bold text-dark">在线机器人列表</h3>
                  <button class="text-primary hover:text-primary/80 text-sm">查看全部</button>
                </div>
                <div class="space-y-4 max-h-[380px] overflow-y-auto pr-2">
                  <div class="flex items-center p-3 rounded-lg bg-light-2 hover:bg-light-1 transition-colors">
                    <img src="https://picsum.photos/50/50?random=2" alt="机器人图片" class="w-12 h-12 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                      <div class="flex items-center justify-between">
                        <h4 class="font-medium">探索者-X1</h4>
                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">在线</span>
                      </div>
                      <p class="text-xs text-dark-3 mt-1">ID: ROB-2023001</p>
                    </div>
                    <button class="text-dark-3 hover:text-primary">
                      <i class="fa fa-ellipsis-v"></i>
                    </button>
                  </div>
                  
                  <div class="flex items-center p-3 rounded-lg bg-light-2 hover:bg-light-1 transition-colors">
                    <img src="https://picsum.photos/50/50?random=3" alt="机器人图片" class="w-12 h-12 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                      <div class="flex items-center justify-between">
                        <h4 class="font-medium">守护者-Z2</h4>
                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">在线</span>
                      </div>
                      <p class="text-xs text-dark-3 mt-1">ID: ROB-2023002</p>
                    </div>
                    <button class="text-dark-3 hover:text-primary">
                      <i class="fa fa-ellipsis-v"></i>
                    </button>
                  </div>
                  
                  <div class="flex items-center p-3 rounded-lg bg-light-2 hover:bg-light-1 transition-colors">
                    <img src="https://picsum.photos/50/50?random=4" alt="机器人图片" class="w-12 h-12 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                      <div class="flex items-center justify-between">
                        <h4 class="font-medium">服务者-S3</h4>
                        <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">低电量</span>
                      </div>
                      <p class="text-xs text-dark-3 mt-1">ID: ROB-2023003</p>
                    </div>
                    <button class="text-dark-3 hover:text-primary">
                      <i class="fa fa-ellipsis-v"></i>
                    </button>
                  </div>
                  
                  <div class="flex items-center p-3 rounded-lg bg-light-2 hover:bg-light-1 transition-colors">
                    <img src="https://picsum.photos/50/50?random=5" alt="机器人图片" class="w-12 h-12 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                      <div class="flex items-center justify-between">
                        <h4 class="font-medium">探索者-X4</h4>
                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">在线</span>
                      </div>
                      <p class="text-xs text-dark-3 mt-1">ID: ROB-2023004</p>
                    </div>
                    <button class="text-dark-3 hover:text-primary">
                      <i class="fa fa-ellipsis-v"></i>
                    </button>
                  </div>
                  
                  <div class="flex items-center p-3 rounded-lg bg-light-2 hover:bg-light-1 transition-colors">
                    <img src="https://picsum.photos/50/50?random=6" alt="机器人图片" class="w-12 h-12 rounded-lg object-cover">
                    <div class="ml-3 flex-1">
                      <div class="flex items-center justify-between">
                        <h4 class="font-medium">运输者-T5</h4>
                        <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full">异常</span>
                      </div>
                      <p class="text-xs text-dark-3 mt-1">ID: ROB-2023005</p>
                    </div>
                    <button class="text-dark-3 hover:text-primary">
                      <i class="fa fa-ellipsis-v"></i>
                    </button>
                  </div>
                </div>
              </div>
              
              <!-- 最近警报 -->
              <div class="card">
                <div class="flex items-center justify-between mb-5">
                  <h3 class="font-bold text-dark">最近警报</h3>
                  <button class="text-primary hover:text-primary/80 text-sm">清除全部</button>
                </div>
                <div class="space-y-4 max-h-[250px] overflow-y-auto pr-2">
                  <div class="flex items-start p-3 rounded-lg bg-danger/5 border-l-4 border-danger">
                    <div class="text-danger mt-1">
                      <i class="fa fa-exclamation-circle"></i>
                    </div>
                    <div class="ml-3 flex-1">
                      <h4 class="font-medium text-dark">运输者-T5 任务失败</h4>
                      <p class="text-xs text-dark-3 mt-1">电池电量过低，任务执行中断</p>
                      <p class="text-xs text-dark-3 mt-1">10分钟前</p>
                    </div>
                  </div>
                  
                  <div class="flex items-start p-3 rounded-lg bg-warning/5 border-l-4 border-warning">
                    <div class="text-warning mt-1">
                      <i class="fa fa-bell"></i>
                    </div>
                    <div class="ml-3 flex-1">
                      <h4 class="font-medium text-dark">服务者-S3 电量不足</h4>
                      <p class="text-xs text-dark-3 mt-1">当前电量低于20%，请安排充电</p>
                      <p class="text-xs text-dark-3 mt-1">30分钟前</p>
                    </div>
                  </div>
                  
                  <div class="flex items-start p-3 rounded-lg bg-primary/5 border-l-4 border-primary">
                    <div class="text-primary mt-1">
                      <i class="fa fa-info-circle"></i>
                    </div>
                    <div class="ml-3 flex-1">
                      <h4 class="font-medium text-dark">系统软件更新</h4>
                      <p class="text-xs text-dark-3 mt-1">有新的系统更新可用，版本号 v2.3.1</p>
                      <p class="text-xs text-dark-3 mt-1">2小时前</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 机器人管理页面 (默认隐藏) -->
        <section id="robots" class="hidden space-y-6">
          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
            <div>
              <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">机器人管理</h2>
              <p class="text-dark-3">查看和管理所有机器人设备</p>
            </div>
            <div class="flex flex-wrap gap-3">
              <div class="relative">
                <select class="form-input pr-10 appearance-none">
                  <option>全部状态</option>
                  <option>在线</option>
                  <option>离线</option>
                  <option>异常</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-3 pointer-events-none"></i>
              </div>
              <div class="relative">
                <select class="form-input pr-10 appearance-none">
                  <option>全部类型</option>
                  <option>探索者</option>
                  <option>守护者</option>
                  <option>服务者</option>
                  <option>运输者</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-3 pointer-events-none"></i>
              </div>
              <button class="btn btn-primary">
                <i class="fa fa-plus"></i>
                <span>添加机器人</span>
              </button>
            </div>
          </div>
          
          <!-- 机器人列表 -->
          <div class="card overflow-hidden">
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-light-1">
                <thead>
                  <tr>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">
                      <div class="flex items-center gap-1">
                        <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                      </div>
                    </th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">机器人</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">ID</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">类型</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">状态</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">位置</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">电池</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-light-1">
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-lg object-cover" src="https://picsum.photos/50/50?random=2" alt="机器人图片">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-dark">探索者-X1</div>
                          <div class="text-xs text-dark-3">上次活动: 5分钟前</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">ROB-2023001</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">探索者</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">在线</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">A区 - 3楼 - 东区</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-24 bg-light-1 rounded-full h-2">
                        <div class="bg-success h-2 rounded-full" style="width: 85%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">85%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-dark-2 hover:text-dark">
                          <i class="fa fa-cog"></i>
                        </button>
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa fa-power-off"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-lg object-cover" src="https://picsum.photos/50/50?random=3" alt="机器人图片">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-dark">守护者-Z2</div>
                          <div class="text-xs text-dark-3">上次活动: 12分钟前</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">ROB-2023002</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">守护者</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">在线</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">B区 - 1楼 - 北区</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-24 bg-light-1 rounded-full h-2">
                        <div class="bg-success h-2 rounded-full" style="width: 65%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">65%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-dark-2 hover:text-dark">
                          <i class="fa fa-cog"></i>
                        </button>
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa fa-power-off"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-lg object-cover" src="https://picsum.photos/50/50?random=4" alt="机器人图片">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-dark">服务者-S3</div>
                          <div class="text-xs text-dark-3">上次活动: 3分钟前</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">ROB-2023003</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">服务者</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">低电量</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">C区 - 5楼 - 西区</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-24 bg-light-1 rounded-full h-2">
                        <div class="bg-warning h-2 rounded-full" style="width: 18%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">18%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-dark-2 hover:text-dark">
                          <i class="fa fa-cog"></i>
                        </button>
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa fa-power-off"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-lg object-cover" src="https://picsum.photos/50/50?random=5" alt="机器人图片">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-dark">探索者-X4</div>
                          <div class="text-xs text-dark-3">上次活动: 1小时前</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">ROB-2023004</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">探索者</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">离线</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">A区 - 2楼 - 南区</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-24 bg-light-1 rounded-full h-2">
                        <div class="bg-dark-3 h-2 rounded-full" style="width: 0%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">0%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-dark-2 hover:text-dark">
                          <i class="fa fa-cog"></i>
                        </button>
                        <button class="text-success hover:text-success/80">
                          <i class="fa fa-power-off"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-lg object-cover" src="https://picsum.photos/50/50?random=6" alt="机器人图片">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-dark">运输者-T5</div>
                          <div class="text-xs text-dark-3">上次活动: 2小时前</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">ROB-2023005</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">运输者</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">异常</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">B区 - 3楼 - 中央</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-24 bg-light-1 rounded-full h-2">
                        <div class="bg-danger h-2 rounded-full" style="width: 32%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">32%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-dark-2 hover:text-dark">
                          <i class="fa fa-cog"></i>
                        </button>
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa fa-power-off"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 分页 -->
            <div class="flex items-center justify-between px-6 py-4 border-t border-light-1">
              <div class="flex-1 flex justify-between sm:hidden">
                <a href="#" class="btn btn-secondary">上一页</a>
                <a href="#" class="btn btn-primary ml-3">下一页</a>
              </div>
              <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                  <p class="text-sm text-dark-3">
                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">24</span> 条记录
                  </p>
                </div>
                <div>
                  <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-dark-3 bg-white text-sm font-medium text-dark-2 hover:bg-light-1">
                      <span class="sr-only">上一页</span>
                      <i class="fa fa-chevron-left"></i>
                    </a>
                    <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">1</a>
                    <a href="#" class="bg-white border border-dark-3 text-dark-2 hover:bg-light-1 relative inline-flex items-center px-4 py-2 text-sm font-medium">2</a>
                    <a href="#" class="bg-white border border-dark-3 text-dark-2 hover:bg-light-1 relative inline-flex items-center px-4 py-2 text-sm font-medium">3</a>
                    <span class="relative inline-flex items-center px-4 py-2 border border-dark-3 bg-white text-sm font-medium text-dark-2">
                      ...
                    </span>
                    <a href="#" class="bg-white border border-dark-3 text-dark-2 hover:bg-light-1 relative inline-flex items-center px-4 py-2 text-sm font-medium">5</a>
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-dark-3 bg-white text-sm font-medium text-dark-2 hover:bg-light-1">
                      <span class="sr-only">下一页</span>
                      <i class="fa fa-chevron-right"></i>
                    </a>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 任务调度页面 (默认隐藏) -->
        <section id="tasks" class="hidden space-y-6">
          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
            <div>
              <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">任务调度</h2>
              <p class="text-dark-3">管理和监控所有机器人执行的任务</p>
            </div>
            <div class="flex flex-wrap gap-3">
              <div class="relative">
                <select class="form-input pr-10 appearance-none">
                  <option>所有任务</option>
                  <option>进行中</option>
                  <option>已完成</option>
                  <option>已失败</option>
                  <option>已暂停</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-3 pointer-events-none"></i>
              </div>
              <div class="relative">
                <select class="form-input pr-10 appearance-none">
                  <option>所有机器人</option>
                  <option>探索者-X1</option>
                  <option>守护者-Z2</option>
                  <option>服务者-S3</option>
                  <option>探索者-X4</option>
                  <option>运输者-T5</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-3 pointer-events-none"></i>
              </div>
              <button class="btn btn-primary">
                <i class="fa fa-plus"></i>
                <span>创建任务</span>
              </button>
            </div>
          </div>
          
          <!-- 任务列表 -->
          <div class="card overflow-hidden">
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-light-1">
                <thead>
                  <tr>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">
                      <div class="flex items-center gap-1">
                        <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                      </div>
                    </th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">任务名称</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">机器人</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">优先级</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">状态</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">进度</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">开始时间</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">预计完成</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-dark-3 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-light-1">
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm font-medium text-dark">A区3楼环境巡检</div>
                      <div class="text-xs text-dark-3">TASK-2023056</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <img src="https://picsum.photos/30/30?random=2" alt="机器人图片" class="h-6 w-6 rounded-full mr-2">
                        <span class="text-sm text-dark-2">探索者-X1</span>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">中</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">进行中</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-32 bg-light-1 rounded-full h-2">
                        <div class="bg-success h-2 rounded-full" style="width: 75%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">75%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 08:30</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 09:45</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-warning hover:text-warning/80">
                          <i class="fa fa-pause"></i>
                        </button>
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa fa-stop"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm font-medium text-dark">B区1楼安全巡逻</div>
                      <div class="text-xs text-dark-3">TASK-2023057</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <img src="https://picsum.photos/30/30?random=3" alt="机器人图片" class="h-6 w-6 rounded-full mr-2">
                        <span class="text-sm text-dark-2">守护者-Z2</span>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">高</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">进行中</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-32 bg-light-1 rounded-full h-2">
                        <div class="bg-success h-2 rounded-full" style="width: 45%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">45%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 09:15</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 11:00</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-warning hover:text-warning/80">
                          <i class="fa fa-pause"></i>
                        </button>
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa fa-stop"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm font-medium text-dark">C区5楼物资配送</div>
                      <div class="text-xs text-dark-3">TASK-2023058</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <img src="https://picsum.photos/30/30?random=4" alt="机器人图片" class="h-6 w-6 rounded-full mr-2">
                        <span class="text-sm text-dark-2">服务者-S3</span>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">低</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">已暂停</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-32 bg-light-1 rounded-full h-2">
                        <div class="bg-warning h-2 rounded-full" style="width: 25%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">25%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 10:00</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 11:30</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-success hover:text-success/80">
                          <i class="fa fa-play"></i>
                        </button>
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa fa-stop"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm font-medium text-dark">A区2楼设备检查</div>
                      <div class="text-xs text-dark-3">TASK-2023059</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <img src="https://picsum.photos/30/30?random=5" alt="机器人图片" class="h-6 w-6 rounded-full mr-2">
                        <span class="text-sm text-dark-2">探索者-X4</span>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">中</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">已失败</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-32 bg-light-1 rounded-full h-2">
                        <div class="bg-danger h-2 rounded-full" style="width: 15%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">15%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 09:45</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-29 11:15</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                        <button class="text-success hover:text-success/80">
                          <i class="fa fa-refresh"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  <tr class="table-row-hover">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <input type="checkbox" class="rounded border-dark-3 text-primary focus:ring-primary/50">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm font-medium text-dark">B区3楼故障修复</div>
                      <div class="text-xs text-dark-3">TASK-2023060</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <img src="https://picsum.photos/30/30?random=6" alt="机器人图片" class="h-6 w-6 rounded-full mr-2">
                        <span class="text-sm text-dark-2">运输者-T5</span>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">高</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已完成</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="w-32 bg-light-1 rounded-full h-2">
                        <div class="bg-success h-2 rounded-full" style="width: 100%"></div>
                      </div>
                      <span class="text-xs text-dark-3 ml-2">100%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-28 16:30</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">2023-07-28 18:45</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                      <div class="flex gap-2">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa fa-eye"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 分页 -->
            <div class="flex items-center justify-between px-6 py-4 border-t border-light-1">
              <div class="flex-1 flex justify-between sm:hidden">
                <a href="#" class="btn btn-secondary">上一页</a>
                <a href="#" class="btn btn-primary ml-3">下一页</a>
              </div>
              <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                  <p class="text-sm text-dark-3">
                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">32</span> 条记录
                  </p>
                </div>
                <div>
                  <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-dark-3 bg-white text-sm font-medium text-dark-2 hover:bg-light-1">
                      <span class="sr-only">上一页</span>
                      <i class="fa fa-chevron-left"></i>
                    </a>
                    <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">1</a>
                    <a href="#" class="bg-white border border-dark-3 text-dark-2 hover:bg-light-1 relative inline-flex items-center px-4 py-2 text-sm font-medium">2</a>
                    <a href="#" class="bg-white border border-dark-3 text-dark-2 hover:bg-light-1 relative inline-flex items-center px-4 py-2 text-sm font-medium">3</a>
                    <span class="relative inline-flex items-center px-4 py-2 border border-dark-3 bg-white text-sm font-medium text-dark-2">
                      ...
                    </span>
                    <a href="#" class="bg-white border border-dark-3 text-dark-2 hover:bg-light-1 relative inline-flex items-center px-4 py-2 text-sm font-medium">7</a>
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-dark-3 bg-white text-sm font-medium text-dark-2 hover:bg-light-1">
                      <span class="sr-only">下一页</span>
                      <i class="fa fa-chevron-right"></i>
                    </a>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 其他页面内容... -->
      </main>
    </div>
  </div>
  
  <script>
    // 侧边栏切换
    document.getElementById('openSidebar').addEventListener('click', function() {
      document.getElementById('sidebar').classList.remove('hidden');
    });
    
    document.getElementById('closeSidebar').addEventListener('click', function() {
      document.getElementById('sidebar').classList.add('hidden');
    });
    
    // 页面切换
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // 获取目标页面ID
        const targetId = this.getAttribute('href');
        
        // 隐藏所有页面
        document.querySelectorAll('main > section').forEach(section => {
          section.classList.add('hidden');
        });
        
        // 显示目标页面
        document.querySelector(targetId).classList.remove('hidden');
        
        // 更新侧边栏活动项
        document.querySelectorAll('.sidebar-item').forEach(item => {
          item.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 初始化图表
    window.addEventListener('load', function() {
      // 小型卡片图表
      const smallChartConfig = {
        type: 'line',
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: {
            x: { display: false },
            y: { display: false }
          },
          elements: {
            point: { radius: 0 },
            line: { tension: 0.4 }
          }
        }
      };
      
      // 在线机器人图表
      new Chart(document.getElementById('onlineRobotsChart'), {
        ...smallChartConfig,
        data: {
          labels: ['', '', '', '', '', '', ''],
          datasets: [{
            data: [18, 20, 17, 22, 23, 25, 24],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            fill: true
          }]
        }
      });
      
      // 执行中任务图表
      new Chart(document.getElementById('runningTasksChart'), {
        ...smallChartConfig,
        data: {
          labels: ['', '', '', '', '', '', ''],
          datasets: [{
            data: [210, 180, 195, 220, 175, 185, 168],
            borderColor: '#0FC6C2',
            backgroundColor: 'rgba(15, 198, 194, 0.1)',
            fill: true
          }]
        }
      });
      
      // 完成任务数图表
      new Chart(document.getElementById('completedTasksChart'), {
        ...smallChartConfig,
        data: {
          labels: ['', '', '', '', '', '', ''],
          datasets: [{
            data: [2100, 2300, 2250, 2400, 2600, 2750, 2876],
            borderColor: '#00B42A',
            backgroundColor: 'rgba(0, 180, 42, 0.1)',
            fill: true
          }]
        }
      });
      
      // 异常警报图表
      new Chart(document.getElementById('alarmsChart'), {
        ...smallChartConfig,
        data: {
          labels: ['', '', '', '', '', '', ''],
          datasets: [{
            data: [15, 12, 10, 8, 11, 9, 7],
            borderColor: '#FF7D00',
            backgroundColor: 'rgba(255, 125, 0, 0.1)',
            fill: true
          }]
        }
      });
      
      // 机器人类型分布图表
      new Chart(document.getElementById('robotTypeChart'), {
        type: 'doughnut',
        data: {
          labels: ['探索者', '守护者', '服务者', '运输者'],
          datasets: [{
            data: [8, 6, 5, 5],
            backgroundColor: [
              '#165DFF',
              '#0FC6C2',
              '#00B42A',
              '#FF7D00'
            ],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                usePointStyle: true,
                padding: 20
              }
            }
          },
          cutout: '70%'
        }
      });
      
      // 任务完成情况图表
      new Chart(document.getElementById('taskCompletionChart'), {
        type: 'bar',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [{
            label: '已完成',
            data: [320, 360, 420, 380, 450, 280, 220],
            backgroundColor: '#00B42A',
            borderRadius: 4
          }, {
            label: '进行中',
            data: [80, 120, 90, 110, 70, 40, 30],
            backgroundColor: '#165DFF',
            borderRadius: 4
          }, {
            label: '已失败',
            data: [15, 20, 10, 18, 12, 5, 8],
            backgroundColor: '#F53F3F',
            borderRadius: 4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                usePointStyle: true,
                padding: 20
              }
            }
          },
          scales: {
            x: {
              grid: {
                display: false
              }
            },
            y: {
              beginAtZero: true,
              grid: {
                color: 'rgba(0, 0, 0, 0.05)'
              }
            }
          }
        }
      });
      
      // 初始化地图
      const map = L.map('robotMap').setView([39.9042, 116.4074], 16);
      
      // 添加地图图层
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      // 添加机器人标记点
      const robotMarkers = [
        { position: [39.905, 116.406], name: '探索者-X1', status: 'online' },
        { position: [39.903, 116.408], name: '守护者-Z2', status: 'online' },
        { position: [39.902, 116.405], name: '服务者-S3', status: 'warning' },
        { position: [39.906, 116.404], name: '探索者-X4', status: 'offline' },
        { position: [39.904, 116.409], name: '运输者-T5', status: 'error' }
      ];
      
      // 定义标记点图标
      const markerIcons = {
        online: L.divIcon({
          className: 'custom-div-icon',
          html: '<div style="background-color: #00B42A; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 0 0 3px rgba(0, 180, 42, 0.3);"><i class="fa fa-android"></i></div>',
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        }),
        warning: L.divIcon({
          className: 'custom-div-icon',
          html: '<div style="background-color: #FF7D00; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 0 0 3px rgba(255, 125, 0, 0.3);"><i class="fa fa-android"></i></div>',
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        }),
        offline: L.divIcon({
          className: 'custom-div-icon',
          html: '<div style="background-color: #86909C; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 0 0 3px rgba(134, 144, 156, 0.3);"><i class="fa fa-android"></i></div>',
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        }),
        error: L.divIcon({
          className: 'custom-div-icon',
          html: '<div style="background-color: #F53F3F; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 0 0 3px rgba(245, 63, 63, 0.3);"><i class="fa fa-android"></i></div>',
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      };
      
      // 添加标记点到地图
      robotMarkers.forEach(robot => {
        const marker = L.marker(robot.position, { icon: markerIcons[robot.status] }).addTo(map);
        marker.bindPopup(`
          <div class="p-2">
            <h3 class="font-bold">${robot.name}</h3>
            <p class="text-sm">状态: ${getStatusText(robot.status)}</p>
            <div class="flex justify-end mt-2">
              <button class="text-xs bg-primary text-white px-2 py-1 rounded">查看详情</button>
            </div>
          </div>
        `);
      });
      
      function getStatusText(status) {
        const statusMap = {
          online: '在线',
          warning: '低电量',
          offline: '离线',
          error: '异常'
        };
        return statusMap[status] || '未知';
      }
    });
  </script>
</body>
</html>
    